import styles from "./tool.module.scss"
import {useEffect, useRef, useState} from "react"
// @ts-ignore
import { LuckyWheel } from 'react-luck-draw'
import {Prize, Button} from '@/types/lottery';
import { Timeline} from 'antd';
import {doDrawExecByUId, queryAwareList} from "@/apis"

export function Tool() {
    // 使用组件
    const myLuckyRef = useRef<LuckyWheel>(null);

    const [mode, setMode] = useState<'left'>('left');
    // 时间线数据
    const [lotteryData, setLotteryData] = useState([
        {
            label: '2024-03-16',
            children: '恭喜Geng抽中【1天体验卡】奖品',
        },
        {
            label: '2024-03-15',
            children: '恭喜XXX抽中【增加全部模型】奖品',
        },
        {
            label: '2024-03-15',
            children: '恭喜YYY抽中【1天体验卡】奖品',
        },
        {
            label: '2024-03-14',
            children: '恭喜ZZZ抽中【增加100次使用】奖品',
        },
        {
            label: '2024-03-14',
            children: '恭喜KKK抽中【增加一个新模型】奖品',
        },
        {
            label: '2024-03-14',
            children: '恭喜MMM抽中【增加七天有效期】奖品',
        },

    ]);
    // {title: '随机积分', background: '#f9e3bb', fonts: [{text: '随机积分', top: '18%'}]},
    // {title: '1天体验卡', background: '#f8d384', fonts: [{text: '1天体验卡', top: '18%'}]},
    // {title: '3天体验卡', background: '#f9e3bb', fonts: [{text: '3天体验卡', top: '18%'}]},
    // {title: '增加50次使用', background: '#f8d384', fonts: [{text: '增加50次使用', top: '18%'}]},
    // {title: '增加一个新模型', background: '#f9e3bb', fonts: [{text: '增加一个新模型', top: '18%'}]},
    // {title: '增加100次使用', background: '#f9e3bb', fonts: [{text: '增加100次使用', top: '18%'}]},
    // {title: '增加全部模型', background: '#f9e3bb', fonts: [{text: '增加全部模型', top: '18%'}]},
    // {title: '增加七天有效期', background: '#f8d384', fonts: [{text: '增加七天有效期', top: '18%'}]},
    // 定义奖品接口
    // ，useState 定义的变量可以在页面渲染时正常获取其值，是因为每当状态更新后，
    // React会自动触发组件重新渲染。在重新渲染的过程中，React会将新的状态传入组件的函数体，从而确保组件内部能够访问到最新的状态值。
    // 然而，在异步回调或闭包中直接访问 useState 设置的状态可能会遇到取不到最新值的问题。这是因为JavaScript的闭包特性以及React的状态更新是异步完成的。
    // 当在一个函数（如事件处理函数、setTimeout回调等）中直接读取状态时，它可能捕获的是该函数创建时的状态值，而非状态更新后的值。
    const [prizes, setPrizes] = useState<Prize[]>([])

    const prizesRef = useRef(prizes);
    const findIndex = (title: string) => {
        console.log("findIndex,title：",title)
        return prizesRef.current.findIndex((item) => item.title === title);

    }

    const queryAwardListHandler = async () => {
        const res = await queryAwareList("100001")
        const data= await res.json()
        const noAward = JSON.parse(
            '{"title":"未中奖","background":"#f8d384","fonts":[{"text":"未中奖","top":"20%"}]}'
        );
        data.unshift(noAward);
        prizesRef.current = data;
        setPrizes(data)
    }
    useEffect(() => {
        queryAwardListHandler().then(res => {
        })
    }, [prizes])

    // 定义按钮接口
    const [buttons, setButton] = useState<Button[]>([
        {radius: '50px', background: '#d64737'},
        {radius: '45px', background: '#fff'},
        {radius: '40px', background: '#f6c66f', pointer: true},
        {
            radius: '35px', background: '#ffdea0',
            fonts: [{text: '开始\n抽奖', fontSize: '18px', top: -15}]
        }
    ])

    const [blocks] = useState<Button[]>([
        {padding: '13px', background: '#d64737'},
    ])

    const [defaultStyle, setDefaultStyle] = useState<{ fontColor: string; fontSize: string }>({
        fontColor: '#d64737',
        fontSize: '14px',
    });
    const handleEnd = (prize: Prize) => {
        console.log(prize);
        alert('恭喜获得大奖:' + prize.title);
    };
    // 生成6位随机数
    function generateRandomSixDigits() {
        const min = 100000; // 最小值（6位数的最小值）
        const max = 999999; // 最大值（6位数的最大值）

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    const handleStart = () => {
        //todo 暂时不知道为啥获取不到prizes
        myLuckyRef.current?.play();
        setTimeout(() => {
            // const index = Math.floor(Math.random() * 8);
            // console.log(index,prizes.length)

             doDrawExec("100001","Genghongliang").then(res =>{
                 console.log("抽奖结果",res)
                 const index = findIndex(res);
                 console.log("抽奖索引值：",index)
                 myLuckyRef.current?.stop(index);
            });


        }, 3000);
    };


    const doDrawExec = async (activityId:string,uid:string) => {
        const randomSixDigitNumber = generateRandomSixDigits();
        const res = await doDrawExecByUId(activityId,randomSixDigitNumber)
        return await res.text();
    }

    return (
        <>

            <div className={styles["tool"]}>
                <div className={styles["lottery"]}>
                    <LuckyWheel
                        ref={myLuckyRef}
                        width="400px"
                        height="400px"
                        blocks={blocks}
                        prizes={prizes}
                        buttons={buttons}
                        defaultStyle={defaultStyle}
                        onStart={handleStart}
                        onEnd={handleEnd}
                    />
                </div>

                <div className={styles["advice"]}>
                    <p><b>中奖播报</b></p>
                    <Timeline
                        mode={mode}
                        items={lotteryData}
                    />

                </div>


            </div>
        </>
    )
}